<template>
	<view class="">
		<NavBar :title="baseFormData.form_template_module_name" :autoBack="false" id="nav">
			<template #left>
				<view class="navbar-left center" @click="goBack">
					<u-icon name="arrow-left" color="#007aff" size="34"></u-icon>
				</view>
			</template>
		</NavBar>
		<view class="block"></view>
		<view class="content">
			<view class="components" v-if="!isLook">
				<DraggableList @setCurTarget='setCurTarget'></DraggableList>
			</view>
			<view class="drop-container" :class="{'look':isLook}" @dragover.prevent @drop="onDrop">
					<view class="questions">
						<EachQuestion :question="showData" :isModel="false" @deleteModule="deleteModule(index)">
						</EachQuestion>
					</view>
				<!-- <view class="add—module" @click="addmodules">
					+ 添加模塊
				</view> -->
			</view>
		</view>
		<view class="footer" v-if="!isLook">
			<view class="btn" @click.stop="submit">
				保存
			</view>

		</view>
		<u-popup v-model="showPopup" border-radius="14" mode="center" width="1000rpx" height="500rpx">
			<view class="popup-content">
				<view class="popup-tips">
					設置模塊名稱
				</view>
				<view class="content-view">
					<uni-forms ref="baseForm" :modelValue="baseFormData" :rules="rules">
						<uni-forms-item label="名稱" name="form_template_module_name" required>
							<uni-easyinput v-model="baseFormData.form_template_module_name" placeholder="請輸入模塊名稱" />
						</uni-forms-item>
					</uni-forms>
				</view>
				<view class="popup-btns">
					<view class="btn" @click="showPopup = false">
						取消
					</view>
					<view class="btn" @click="onAddConfirm">
						確定
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import NavBar from "@/component/NavBar"
	import DraggableList from '../components/DraggableList.vue'
	import EachQuestion from '../components/EachQuestion.vue'
	import {
		addModule,
		getModuleDetail,
		editModule
	} from "@/api/template.js"
	export default {
		name: 'addForms',
		components: {
			NavBar,
			DraggableList,
			EachQuestion
		},
		data() {
			return {
				tabsList: [{
						name: '前置工作',
						ident: 0,
						tabName: 'frontendData'
					},
					{
						name: '工作檢核',
						ident: 1,
						tabName: 'reviewData'
					},
					{
						name: '接績',
						ident: 2,
						tabName: "achievementsData"
					},
				],
				target: null,
				caseId: '',
				baseFormData: {
					form_template_name: '',
					form_template_remark: ''
				},
				showPopup: false,
				messageText: '',
				casezy_id: '',
				isEdit:false,
				id:'',
				form_template_id:'',
				isCopy:false,
				showData:{
					dataList:[]
				},
				baseFormData:{
					form_template_module_name: '',
				},
				rules: {
					// 对name字段进行必填验证
					form_template_module_name: {
						// name 字段的校验规则
						rules: [
							// 校验 name 不能为空
							{
								required: true,
								errorMessage: '請輸入模塊名稱',
							},
						],
						validateTrigger: 'submit'
					},
				},
				id: '',
				isLook:false,
			}
		},
		onLoad() {
			if (!uni.getStorageSync("islogin")) {
				this.$Toast("請先登錄")
				setTimeout(() => {
					this.toPage("Home")
				}, 1200)
			} else {
				const {
					id,
					isLook
				} = this.$Route.query
				this.id = id
				this.isLook = isLook
				if(id){
					this.getTemDetail()
				}
			}
		},
		methods: {
			goBack() {
				uni.navigateBack(-1)
			},
			setCurTarget(target) {
				this.target = target
			},
			onDrop() {
				let type = this.target.type
				switch (type) {
					case 'radio':
						this.showData.dataList.push({
							type: 'radio',
							title: '',
							options: [],
							exampleFileList: []
						})
						break;
					case 'select':
						this.showData.dataList.push({
							type: 'select',
							title: '',
							options: [],
							exampleFileList: []
						})
						break;
					case 'input':
						this.showData.dataList.push({
							type: 'input',
							title: '',
							options: [],
							exampleFileList: []
						})
						break;
					case 'upload':
						this.showData.dataList.push({
							type: 'upload',
							title: '',
							options: [],
							fileList: [],
							exampleFileList: []
						})
						break;
					case 'date':
						this.showData.dataList.push({
							type: 'date',
							title: '',
							options: [],
							exampleFileList: []
						})
						console.log(this.showData.dataList)
						break;
					case 'time':
						this.showData.dataList.push({
							type: 'time',
							title: '',
							options: [],
							exampleFileList: []
						})
						break;
				}
			},
			deleteModule(index, moduleName) {
				this.showData.dataList.splice(index, 1)
			},
			getTemDetail(){
				getModuleDetail({
					uid: uni.getStorageSync("uid"),
					id:this.id
				}).then(resData=>{
					try{
						console.log(resData)
						this.showData.dataList = JSON.parse(resData.form_template_module_content)
						this.baseFormData.form_template_module_name = resData.form_template_module_name
					}catch(err){
						console.log(err)
					}
				})
			},
			submit() {
				this.showPopup = true
			},
			onAddConfirm() {
				this.$refs.baseForm.validate().then((res) => {
					console.log(res)
					if (res) {
						let data = {
							uid: uni.getStorageSync("uid"),
							casezy_id: 87,
							form_template_module_name: this.baseFormData.form_template_module_name,
							form_template_module_content: JSON.stringify(this.showData.dataList)
						}
						if (!this.id) {
							//  没有casezy_form_template_id 就是新增的情况 copy也走新增逻辑
							addModule(data).then((res) => {
								this.$Toast('操作成功')
								setTimeout(() => {
									this.showPopup = false
									this.goBack()
								}, 300)

							}).catch((err) => {
								if (err.code === 102) {
									this.$ClearLogin(err.msg)
								} else {
									this.$Toast(err.msg)
								}
							})
						}else{
							data.id = this.id
							editModule(data).then((res) => {
								this.$Toast('編輯成功')
								setTimeout(() => {
									this.showPopup = false
									this.goBack()
								}, 300)

							}).catch((err) => {
								if (err.code === 102) {
									this.$ClearLogin(err.msg)
								} else {
									this.$Toast(err.msg)
								}
							})
						}
					}
				})
			}
		}
	}
</script>

<style lang='scss' scoped>
	.block {
		height: 100rpx;
	}
	.content {
		display: flex;
		justify-content: space-between;

		.movable-area {
			width: 300rpx;
			height: 300rpx;
			border: 1rpx solid red;
		}

		.components {
			position: fixed;
			top: 180rpx;
			left: 0;
			width: 700rpx;
			background: #F6F6F6;
			border-radius: 0rpx 0rpx 0rpx 0rpx;
		}

		.drop-container {
			margin-left: 740rpx;
			outline: 1rpx solid #F6F6F6;
			padding: 24rpx;
			width: 100%;
			min-height: 200rpx;
			// .add—module {
			// 	background: #E6EEFF;
			// 	border-radius: 4px 4px 4px 4px;
			// 	border: 1px solid #E7E7E7;
			// 	color: #3A78FC;
			// 	padding: 12rpx;
			// }
		}
		.look{
			margin-left: 0;
		}
		.questions {
			margin-bottom: 24rpx;
		}

	}

	.popup-content {
		padding-top: 24rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		align-items: center;

		.popup-tips {
			font-size: 36rpx;
		}

		.content-view {
			padding: 60rpx 48rpx 146rpx;
			box-sizing: border-box;
			width: 100%;
		}

		.popup-btns {
			display: flex;
			width: 100%;
			border-top: 1px solid #ebedf0;

			.btn {
				width: 50%;
				text-align: center;
				line-height: 88rpx;
				cursor: pointer;

				&:first-child {
					border-right: 1px solid #ebedf0;
					color: #323233;
				}

				&:last-child {
					color: red;
				}
			}
		}
	}
	::v-deep .fixforpc-z-index {
		z-index: 99999;
	}
	.footer {
		display: flex;
		justify-content: flex-end;
		padding: 0 24rpx;
		gap: 24rpx;
		margin-top: 24rpx;

		.btn {
			color: #fff;
			cursor: pointer;
			background: #3A78FC;
			border-radius: 6px;
			padding: 12rpx 24rpx;
		}
	}
</style>